<template>
  <!--规格选择-->
  <transition name="slideup">
    <div class="pop-wrap" v-show="isShow">
      <div class="rule-choice">
        <img src="./images/close-icon.svg" class="close" @click="hide">
        <div class="rule-top">
          <!--<img :src="dimg">-->
          <img src="http://www.taochu.com/data/files/store_114/goods_14/201804251420146300.jpg">
          <div class="choiced">
            <div class="goods-name">雷沃庄园男爵干红葡萄酒（双支装礼盒） 750ml</div>
            <div class="price">¥ 999.00</div>
          </div>
        </div>
        <div class="rule-c">
          <div class="shuliang">
            <span>选择购买数量</span> <span class="num-box">
              <img src="./images/bigsub-grayicon.svg" class="minus" @click="modifyNum(-1)">
            <!--<b class="number">{{quantity}}</b>-->
            <input type="number" class="number" v-model="quantity"/>
              <img src="./images/bigadd-grayicon.svg" class="add" @click="modifyNum(1)">
            </span>
          </div>

        </div>
        <div class="btn-sure" @click="sure">确定</div>
      </div>
    </div>
  </transition>

</template>

<script>
  import getuser from '@/util/getuser'
  import config from '@/config/config'
  import {setCookie, getCookie} from '@/util/user'

  export default {
    components: {},
    props: ['isShow', 'opration'],
    data(){
      return {
        quantity: 1,
      };
    },
    mounted(){

    },

    computed: {},
    methods: {
      sure(){

      },
      modifyNum(n){
        if (n > 0) {
          this.quantity++
        } else {
          if (this.quantity > 1) {
            this.quantity--
          }
        }
      },
      hide(){
        this.$parent.closeBuyPop()
      },
    },
    filters: {
      toDou(val){
        if (val) {
          return val.toFixed(2);
        }
      }
    },
  }
</script>


<style scoped>
  .slideup-enter-active, .slideup-leave-active{
    transition:all .3s
  }
  .slideup-enter, .slideup-leave-to{
    transform:translateY(100%);
    opacity:0;
  }
  .pop-wrap{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    bottom:0;
    background-color:rgba(0, 0, 0, .4);
    z-index:100000;
    transition:all .3s;
  }
  .rule-choice{
    width:100%;
    /*height:40vh;*/
    position:absolute;
    background:#fff;
    bottom:0;
    left:0;
  }
  .rule-top{
    height:4rem;
  }
  .rule-top img{
    position:absolute;
    background-color:#fff;
    /*border:1px solid #d5d5d5;*/
    border-radius:.2rem;
    width:4rem;
    height:4rem;
    top:-1rem;
    left:.5rem;
  }
  .rule-c{
    padding:.75rem;
    text-align:left;
    height:3rem;
    margin-bottom:2.5rem;
    border-top:1px solid #f7f7f7;
  }
  .close{
    position:absolute;
    right:.6rem;
    top:.6rem;
  }
  .choiced{
    padding-left:5rem;
    text-align:left;
    padding-top:.7rem;
  }
  .goods-name{
    font-size:.6rem;
    color:#454545;
    padding-right:1.6rem;
  }
  .price{
    font-size:.7rem;
    color:#e93b3d;
    line-height:2;
  }
  .red{ color:#e80013; }
  .fc-6{ color:#666; }
  .shuliang{
    height:1.3rem;
    line-height:1.3rem;
    font-size:.7rem;
    color:#3b3f3c;
  }
  .num-box{
    float:right;
    /*border:1px solid #d5d5d5;*/
    /*border-radius:2px;*/
    /*width:120px;*/
    height:35px;
    font-size:.7rem;
    overflow:hidden;
  }
  .add, .minus{
    float:left;
    display:inline-block;
    width:25px;
    text-align:center;
    line-height:32px;
    font-weight:normal;
    color:#666;
    border:0;
    background:none;
  }
  .number{
    width:50px;
    float:left;
    display:inline-block;
    text-align:center;
    line-height:1.3rem;
    font-weight:normal;
    color:#666;
    border:0;
    background:none;
  }
  .minus{
    width:1.3rem;
  }
  .add{
    width:1.3rem;
    float:right;
  }
  .btn-sure{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:2.2rem;
    line-height:2.2rem;
    background-color:#e80013;
    font-size:.85rem;
    color:#ffffff;
  }
  .mt5{ margin-top:.25rem; }

</style>
